<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Fit Layout</title>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
    <script src="../../../scripts/jquery.min.js"></script>
    <script src="../../../scripts/miniui/miniui.js"></script>
    <link href="../../../scripts/miniui/themes/default/miniui.css" rel="stylesheet">
    <link href="../../../scripts/miniui/themes/icons.css" rel="stylesheet">
    <link href="../../../scripts/miniui/themes/pure/skin.css" rel="stylesheet">
    <script src="../../../scripts/core.js"></script>

</head>
<body>
<style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>
<mini-toolbar>
    <table style="width:100%;">
        <tr>
            <td style="white-space:nowrap;">
                从<input class="mini-datepicker" format="yyyy-MM-dd" id="start"/>到
                <input class="mini-datepicker" format="yyyy-MM-dd" id="end"/>
                <a class="mini-button" onclick="search()">查询</a>
            </td>
        </tr>
    </table>
</mini-toolbar>
<!--撑满页面-->
<div class="mini-fit">

    <mini-datagrid _dataField="data111" allowCellEdit="true" allowCellSelect="true"
                   allowResize="true"
                   allowSortColumn="false" class="mini-datagrid"
                   id="datagrid1" idField="id"
                   multiSelect="false" onbeforeload="onload"
                   ondrawsummarycell="onDrawSummaryCell" pageSize="30"
                   showSortIcon="true" showSummaryRow="true"
                   style="width:100%;height:100%;"
                   url="/cmsapi/business/getActiveData"
    >
        <columns>
            <column type="indexcolumn"></column>
            <column dateFormat="yyyy-MM-dd" field="createTime" width="100">日期
            </column>
            <column field="num" headerAlign="center" width="150">
                人数
            </column>
        </columns>
    </mini-datagrid>

</div>

<script type="text/javascript">

    var canLoad = false;
    var auth = GetParams()
    mini.parse();
    var grid = mini.get("datagrid1");

    grid.setAjaxOptions({
        headers: {"userId": auth.userId, "token": auth.token}
    });
    grid.load();


    function onDrawSummaryCell(e) {
        var result = e.result;
        var grid = e.sender;
        var rows = e.data;

        if (e.field == "num") {
            var total = 0;
            for (var i = 0, l = rows.length; i < l; i++) {
                var row = rows[i];
                var t = row.num;
                if (isNaN(t)) continue;
                total += t;
            }

            e.cellHtml = "总计: " + total + " 位用户活跃";
        }
    }

    function search() {
        var start = mini.get("start");
        var end = mini.get("end");
        grid.load({
            start: start == null ? null : mini.formatDate(start.getValue(), "yyyy-MM-dd"),
            end: end == null ? null : mini.formatDate(end.getValue(), "yyyy-MM-dd")
        });
    }


</script>

</body>
</html>